<template>
    <div>
        <!-- 动态组件-->
        <!-- 场景：未知组件时 -->

        <!-- keep-alive -->
        <!-- 场景：tab切换时，不需要重复渲染的组件，可以优化性能 -->
        <!-- 使用：需配合动态组件使用 -->
        <!-- 实际效果：切换时，DOM会消失，失活的组件将会被缓存！再次显示时，不会重走声明周期，不过提供了 activated 和 deactivated钩子 -->
        <button @click="changeState('A')">A</button>
        <button @click="changeState('B')">B</button>
        <button @click="changeState('C')">C</button>

        <keep-alive>
            <!-- <KeepAliveStageA v-if="state === 'A'"/>
            <KeepAliveStageB v-if="state === 'B'"/>
            <KeepAliveStageC v-if="state === 'C'"/> -->
            <component :is="`KeepAliveStage${state}`"></component>
        </keep-alive>
    </div>
</template>

<script>
import KeepAliveStageA from './KeepAliveStateA'
import KeepAliveStageB from './KeepAliveStateB'
import KeepAliveStageC from './KeepAliveStateC'

export default {
    components: {
        KeepAliveStageA,
        KeepAliveStageB,
        KeepAliveStageC
    },
    data() {
        return {
            state: 'A'
        }
    },
    methods: {
        changeState(state) {
            this.state = state
        }
    }
}
</script>